<template>
	<div class="body">
		<retreat title="收藏"></retreat>
		<div class="conter">
			<section>
				<van-checkbox v-model="checked">
					<div class="item">
						<img src="../assets/logo.png" alt="">
						<div class="right">
							<p>fdbyugfhduhyfggfgbfjkdbgjfdbngjdfsbgjfdd</p>
							<div class="biaoqian">
								<div class="b-1">急速退款</div>
								<div class="b-2">正品保障</div>
							</div>
							<div class="jiage">
								<div class="text">
									<div class="text1">￥100</div>
									<div class="text2">￥155</div>
								</div>
							</div>
						</div>
					</div>
				</van-checkbox>
				<van-divider></van-divider>
			</section>
			<div class="fukuan">
				<van-checkbox v-model="checked">全选</van-checkbox>
				<div class="right">
					<van-button round color="#ee500c" size="small">取消收藏</van-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import Retreat from '@/components/Retreat.vue'
	import {
		Checkbox,
		CheckboxGroup,
		Button,
		Divider
	} from 'vant'
	export default {
		data() {
			return {
				checked: true
			}
		},
		components: {
			Retreat,
			[Button.name]: Button,
			[Checkbox.name]: Checkbox,
			[CheckboxGroup.name]: CheckboxGroup,
			[Divider.name]: Divider,
		},
	}
</script>

<style lang="less" scoped>
	@themeColor: #1ba4f0;
	@backColor: #f5f5f5;

	@shenglue: {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.body {
		.conter {
			section {
				width: 100vw;
				background-color: #fff;
				padding: 5px;

				.item {
					display: flex;
					align-items: center;

					// justify-content: space-between;
					img {
						width: 70px;
						height: 80px;
						border-radius: 10px;

					}

					&>.right {
						width: 50vw;
						margin-left: 15px;

						// border: 1px solid #ccc;
						p {
							width: 100%;
							font-size: 22px;
							@shenglue()
						}

						.biaoqian {
							margin-top: 5px;
						}

						.jiage {
							width: 100%;
						}
					}
				}
			}
			&>.fukuan {
				width: 100vw;
				height: 55px;
				border-top-left-radius: 15px;
				border-top-right-radius: 15px;
				position: fixed;
				bottom: 50px;
				background-color: #fff;
				border: 1px solid #ccc;
				display: flex;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;
				padding: 0 20px;
			
				&>.right {
					display: flex;
					align-items: center;
					div {
						margin-right: 5px;
						>span {
							font-weight: 700;
						}
					}
				}
			
			}
		}
		
	}
</style>
